<script setup lang="ts">
const menus = ref([{ title: '中瑞集团', route: '/about?menu=0#gsjj' }, { title: '发展历程', route: '/about?menu=1#fzlc' }, { title: '企业文化', route: '/about?menu=2#qywh' }])
const menuIndex = ref(0)
const route = useRoute()
const router = useRouter()
watch(() => route.query, (query) => {
  if (query.menu)
    menuIndex.value = +query.menu
}, { immediate: true })

function handleClickMenu(route: string) {
  router.push(route)
}
</script>

<template>
  <div class="about">
    <img class="banner" src="https://public-oss-file.zmaxfilm.com/website-compress/jituanjianjie-banner.png" alt="集团简介">
    <div class="menu">
      <div class="content">
        <div v-for="(menu, index) in menus" :key="index" class="menu-item"
          :class="{ 'menu-item--active': menuIndex === index }" @click="handleClickMenu(menu.route)">
          {{ menu.title }}
        </div>
      </div>
    </div>
    <div class="main">
      <AboutGongSiJianJie />
      <AboutFaZhanLiCheng />
      <AboutQiYeWenHua />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.about {
  display: flex;
  flex-direction: column;

  .banner {
    width: 100%;
    height: 600px;
  }

  .menu {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    background-color: #FAFAFA;

    .content {
      gap: 50px;
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;

      .menu-item {
        height: 100%;
        display: flex;
        font-size: 16px;
        color: #666666;
        cursor: pointer;
        position: relative;
        align-items: center;

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          width: 100%;
          height: 2px;
          bottom: 0;
          transform-origin: center;
          background-color: var(--theme-color);
          transform: translateX(-50%) scaleX(0);
          transition: transform 0.4s ease;
        }

        &:hover::after,
        &.menu-item--active::after {
          transform: translateX(-50%) scaleX(1);
        }
      }
    }
  }

  .main {
    display: flex;
    flex-direction: column;
  }
}
</style>
